<template>
	<view class="content">
		<view class="header_logo"><uni-icons type="vip-filled" size="40"></uni-icons></view>
		<view class="header_search" @click="get_Location()"></view>
		<myTabbar></myTabbar>
	</view>
</template>

<script setup lang="ts">
import { onShow, onLoad } from '@dcloudio/uni-app'
// import { Gethttp } from '../../network/fetchTool.js'
import myTabbar from '../../components/Tabbar.vue'
import { reactive } from 'vue'
let data = reactive({
	CityName: '金华'
})
// 跳转至地区
const get_Location = () => {
	uni.navigateTo({
		url: '/pages/location/location'
	})
}
//获得城市缓存
const getCityName = () => {
	setTimeout(function() {
		uni.getStorage({
			key: 'City_Name',
			success(res) {
				data.CityName = res.data
			}
		})
	}, 500)
}
//获取定位
const getLocationAuth = () => {
	uni.getLocation({
		type: 'gcj02',
		success(res) {
			let lat = res.latitude
			let lng = res.longitude
			let key = 'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV' //申请地址：https://lbs.qq.com/dev/console/application/mine
			uni.request({
				url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng + '&key=' + key,
				method: 'GET',
				success(ress) {
					// let data = ress.data; //获取到所有定位的数据
					let CityName = ress.data.result.address_component.city
					console.log(ress)
					uni.setStorage({
						key: 'City_Name',
						data: CityName
					})
				},
				fail() {
					uni.showToast({
						title: '对不起，数据获取失败！',
						icon: 'none'
					})
				}
			})
		},
		fail(res) {
			uni.showToast({
				title: '对不起，获取位置失败！',
				icon: 'none'
			})
		}
	})
}
const handleFei = () => {
	console.log('handleFei点击事件=====')
}

onShow(() => {
	getCityName()
})
onLoad(() => {
	getLocationAuth()
})
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 10px;
	.header_logo {
		align-self: flex-start;
	}
	.header_search {
		width: 100px;
		height: 100rpx;
		border: 1px solid black;
	}
}
</style>
